import { Navigate, useRoutes } from 'react-router-dom'

import Login from '../pages/Login'
import Main from '../pages/Main'
import NotFind from '../pages/404'

import About from '../pages/Main/About'
import Home from '../pages/Main/Home'

import Music from '../pages/Main/Home/Music'
import News from '../pages/Main/Home/News'

const routes = [
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/main',
    element: <Main />,
    children: [
      {
        path: '/main/about',
        element: <About />
      },
      {
        path: '/main/home',
        element: <Home />,
        children: [
          {
            path: '/main/home/music',
            element: <Music />
          },
          {
            path: '/main/home/news',
            element: <News />
          }
        ]
      },
      {
        path: '/main/',
        element: <Navigate to='/main/about' />
      }
    ]
  },
  {
    path: '/',
    element: <Navigate to='/login' />
  },
  {
    path: '*',
    element: <NotFind />
  }
]

export default routes

// 返回一个函数式组件 hooks 可以在函数式组件的最外层使用
export const GetRoutes = () => {
  return useRoutes(routes)
}

// 返回一个自定义 hooks ，hooks 可以在其他 hooks 中使用
export const useMakeRoutes = () => {
  return useRoutes(routes)
}